Generování nonce pro Content Security Policy na frontendu: Zabezpečení dynamických skriptů

V dnešním světě webového vývoje je zabezpečení frontendu naprosto klíčové. Útoky typu Cross-Site Scripting (XSS) zůstávají významnou hrozbou a robustní Content Security Policy (CSP) je zásadním obranným mechanismem. Tento článek poskytuje komplexního průvodce implementací CSP s whitelistováním skriptů na bázi nonce, se zaměřením na výzvy a řešení pro dynamicky vkládané skripty.

Co je Content Security Policy (CSP)?

CSP je hlavička HTTP odpovědi, která vám umožňuje kontrolovat, jaké zdroje může uživatelský agent pro danou stránku načíst. V podstatě se jedná o whitelist, který prohlížeči říká, které zdroje jsou důvěryhodné a které ne. To pomáhá předcházet útokům XSS tím, že omezuje prohlížeč v provádění škodlivých skriptů vložených útočníky.

Direktivy CSP

Direktivy CSP definují povolené zdroje pro různé typy prostředků, jako jsou skripty, styly, obrázky, písma a další. Mezi běžné direktivy patří:

• `default-src`: Záložní direktiva, která se vztahuje na všechny typy zdrojů, pokud nejsou definovány specifické direktivy.
• `script-src`: Specifikuje povolené zdroje pro JavaScriptový kód.
• `style-src`: Specifikuje povolené zdroje pro CSS styly.
• `img-src`: Specifikuje povolené zdroje pro obrázky.
• `connect-src`: Specifikuje povolené zdroje pro vytváření síťových požadavků (např. AJAX, WebSockets).
• `font-src`: Specifikuje povolené zdroje pro písma.
• `object-src`: Specifikuje povolené zdroje pro pluginy (např. Flash).
• `media-src`: Specifikuje povolené zdroje pro audio a video.
• `frame-src`: Specifikuje povolené zdroje pro rámce a iframe.
• `base-uri`: Omezuje URL, které lze použít v elementu `<base>`.
• `form-action`: Omezuje URL, na které mohou být formuláře odesílány.

Síla Nonce

Ačkoli whitelistování specifických domén pomocí `script-src` a `style-src` může být efektivní, může být také omezující a obtížné na údržbu. Flexibilnějším a bezpečnějším přístupem je použití nonce. Nonce (number used once - číslo použité jednou) je kryptograficky náhodné číslo, které se generuje pro každý požadavek. Zahrnutím jedinečného nonce do vaší CSP hlavičky a do tagu `<script>` vašich inline skriptů můžete prohlížeči sdělit, aby prováděl pouze skripty, které mají správnou hodnotu nonce.

Příklad CSP hlavičky s Nonce:

Content-Security-Policy: default-src 'self'; script-src 'nonce-{{nonce}}'

Příklad inline tagu skriptu s Nonce:

<script nonce="{{nonce}}">console.log('Hello, world!');</script>

Generování Nonce: Základní koncept

Proces generování a aplikace nonce obvykle zahrnuje tyto kroky:

1. Generování na straně serveru: Vygenerujte kryptograficky bezpečné náhodné nonce na serveru pro každý příchozí požadavek.
2. Vložení do hlavičky: Zahrňte vygenerované nonce do hlavičky `Content-Security-Policy` a nahraďte `{{nonce}}` skutečnou hodnotou.
3. Vložení do tagu skriptu: Vložte stejnou hodnotu nonce do atributu `nonce` každého inline tagu `<script>`, jehož spuštění chcete povolit.

Výzvy u dynamicky vkládaných skriptů

Zatímco nonce jsou efektivní pro statické inline skripty, dynamicky vkládané skripty představují výzvu. Dynamicky vkládané skripty jsou ty, které jsou přidány do DOM po počátečním načtení stránky, často pomocí JavaScriptového kódu. Pouhé nastavení CSP hlavičky při počátečním požadavku tyto dynamicky přidané skripty nepokryje.

Zvažte tento scénář:

```javascript function injectScript(url) { const script = document.createElement('script'); script.src = url; document.head.appendChild(script); } injectScript('https://example.com/script.js'); ```

Pokud `https://example.com/script.js` není explicitně na whitelistu ve vašem CSP, nebo pokud nemá správné nonce, prohlížeč zablokuje jeho provedení, i když počáteční načtení stránky mělo platné CSP s nonce. Je to proto, že prohlížeč vyhodnocuje CSP *v okamžiku, kdy je zdroj požadován/proveden*.

Řešení pro dynamicky vkládané skripty

Existuje několik přístupů, jak se vypořádat s dynamicky vkládanými skripty s CSP a nonce:

1. Server-Side Rendering (SSR) nebo Pre-rendering

Pokud je to možné, přesuňte logiku vkládání skriptů do procesu renderování na straně serveru (SSR) nebo použijte techniky pre-renderování. To vám umožní vygenerovat potřebné tagy `<script>` se správným nonce ještě před odesláním stránky klientovi. Frameworky jako Next.js (React), Nuxt.js (Vue) a SvelteKit vynikají v renderování na straně serveru a mohou tento proces zjednodušit.

Příklad (Next.js):

```javascript function MyComponent() { const nonce = getCspNonce(); // Funkce pro získání nonce return ( <script nonce={nonce} src="/path/to/script.js"></script> ); } export default MyComponent; ```

2. Programatické vkládání Nonce

Tento přístup zahrnuje generování nonce na serveru, jeho zpřístupnění klientskému JavaScriptu a následné programatické nastavení atributu `nonce` na dynamicky vytvořeném elementu skriptu.

Kroky:

1. Zpřístupnění Nonce: Vložte hodnotu nonce do počátečního HTML, buď jako globální proměnnou, nebo jako datový atribut na nějakém elementu. Vyhněte se přímému vkládání do řetězce, protože to může být snadno zmanipulováno. Zvažte použití bezpečného mechanismu kódování.
2. Získání Nonce: Ve vašem JavaScriptovém kódu získejte hodnotu nonce z místa, kde byla uložena.
3. Nastavení atributu Nonce: Před připojením elementu skriptu do DOM nastavte jeho atribut `nonce` na získanou hodnotu.

Příklad:

Na straně serveru (např. s použitím Jinja2 v Pythonu/Flasku):

```html <div id="csp-nonce" data-nonce="{{ nonce }}"></div> ```

Klientský JavaScript:

```javascript function injectScript(url) { const nonceElement = document.getElementById('csp-nonce'); const nonce = nonceElement ? nonceElement.dataset.nonce : null; if (!nonce) { console.error('CSP nonce not found!'); return; } const script = document.createElement('script'); script.src = url; script.nonce = nonce; document.head.appendChild(script); } injectScript('https://example.com/script.js'); ```

Důležitá upozornění:

• Bezpečné uložení: Buďte opatrní, jak zpřístupňujete nonce. Vyhněte se jeho přímému vkládání do JavaScriptového řetězce ve zdrojovém HTML, protože to může být zranitelné. Použití datového atributu na elementu je obecně bezpečnější přístup.
• Zpracování chyb: Zahrňte zpracování chyb pro elegantní řešení případů, kdy nonce není k dispozici (např. kvůli chybné konfiguraci). Můžete se rozhodnout přeskočit vkládání skriptu nebo zaznamenat chybovou zprávu.

3. Použití 'unsafe-inline' (nedoporučuje se)

I když se to pro optimální bezpečnost nedoporučuje, použití direktivy `'unsafe-inline'` ve vašich CSP direktivách `script-src` a `style-src` umožňuje provádění inline skriptů a stylů bez nonce. To účinně obchází ochranu, kterou nonce poskytují, a výrazně oslabuje vaše CSP. Tento přístup by se měl používat pouze jako poslední možnost a s extrémní opatrností.

Proč se to nedoporučuje:

Povolením všech inline skriptů otevíráte svou aplikaci útokům XSS. Útočník by mohl do vaší stránky vložit škodlivé skripty a prohlížeč by je provedl, protože CSP povoluje všechny inline skripty.

4. Hashe skriptů

Místo nonce můžete použít hashe skriptů. To zahrnuje výpočet hashe SHA-256, SHA-384 nebo SHA-512 obsahu skriptu a jeho zahrnutí do direktivy `script-src`. Prohlížeč provede pouze skripty, jejichž hash odpovídá zadané hodnotě.

Příklad:

Za předpokladu, že obsah `script.js` je `console.log('Hello, world!');` a jeho SHA-256 hash je `sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=`, CSP hlavička by vypadala takto:

Content-Security-Policy: default-src 'self'; script-src 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='

Výhody:

• Přesná kontrola: Povoluje spuštění pouze specifických skriptů s odpovídajícími hashi.
• Vhodné pro statické skripty: Funguje dobře, když je obsah skriptu znám předem a nemění se často.

Nevýhody:

• Náročnost na údržbu: Pokaždé, když se změní obsah skriptu, musíte přepočítat hash a aktualizovat CSP hlavičku. To může být pro dynamické skripty nebo skripty, které se často aktualizují, těžkopádné.
• Složité pro dynamické skripty: Hashování obsahu dynamických skriptů za běhu může být složité a může způsobit snížení výkonu.

Osvědčené postupy pro generování CSP Nonce

• Používejte kryptograficky bezpečný generátor náhodných čísel: Ujistěte se, že váš proces generování nonce používá kryptograficky bezpečný generátor náhodných čísel, aby se zabránilo útočníkům v předvídání nonce.
• Generujte nové Nonce pro každý požadavek: Nikdy nepoužívejte nonce znovu napříč různými požadavky. Každé načtení stránky by mělo mít jedinečnou hodnotu nonce.
• Bezpečně ukládejte a přenášejte Nonce: Chraňte nonce před zachycením nebo manipulací. Používejte HTTPS k šifrování komunikace mezi serverem a klientem.
• Ověřte Nonce na serveru: (Pokud je to relevantní) Ve scénářích, kde potřebujete ověřit, že spuštění skriptu pochází z vaší aplikace (např. pro analytiku nebo sledování), můžete ověřit nonce na straně serveru, když skript posílá data zpět.
• Pravidelně kontrolujte a aktualizujte své CSP: CSP není řešení typu „nastav a zapomeň“. Pravidelně kontrolujte a aktualizujte své CSP, abyste řešili nové hrozby a změny ve vaší aplikaci. Zvažte použití nástroje pro reportování CSP k monitorování porušení a identifikaci potenciálních bezpečnostních problémů.
• Používejte nástroj pro reportování CSP: Nástroje jako Report-URI nebo Sentry vám mohou pomoci monitorovat porušení CSP a identifikovat potenciální problémy ve vaší konfiguraci CSP. Tyto nástroje poskytují cenné informace o tom, které skripty jsou blokovány a proč, což vám umožní vylepšit vaše CSP a zlepšit bezpečnost vaší aplikace.
• Začněte s politikou pouze pro reportování: Než začnete CSP vynucovat, začněte s politikou pouze pro reportování. To vám umožní sledovat dopad politiky bez skutečného blokování jakýchkoli zdrojů. Poté můžete politiku postupně zpřísňovat, jakmile získáte důvěru. Tento režim umožňuje hlavička `Content-Security-Policy-Report-Only`.

Globální aspekty implementace CSP

Při implementaci CSP pro globální publikum zvažte následující:

• Internacionalizovaná doménová jména (IDN): Ujistěte se, že vaše CSP politiky správně zpracovávají IDN. Prohlížeče mohou s IDN zacházet odlišně, proto je důležité testovat vaše CSP s různými IDN, abyste se vyhnuli neočekávanému blokování.
• Sítě pro doručování obsahu (CDN): Pokud používáte CDN k poskytování skriptů a stylů, ujistěte se, že domény CDN jsou zahrnuty ve vašich direktivách `script-src` a `style-src`. Buďte opatrní při používání zástupných domén (např. `*.cdn.example.com`), protože mohou představovat bezpečnostní rizika.
• Regionální předpisy: Buďte si vědomi jakýchkoli regionálních předpisů, které mohou ovlivnit vaši implementaci CSP. Například některé země mohou mít specifické požadavky na lokalizaci dat nebo soukromí, které by mohly ovlivnit vaši volbu CDN nebo jiných služeb třetích stran.
• Překlad a lokalizace: Pokud vaše aplikace podporuje více jazyků, ujistěte se, že vaše CSP politiky jsou kompatibilní se všemi jazyky. Například pokud používáte inline skripty pro lokalizaci, ujistěte se, že mají správné nonce nebo jsou na whitelistu ve vašem CSP.

Příkladový scénář: Vícejazyčný e-commerce web

Zvažte vícejazyčný e-commerce web, který dynamicky vkládá JavaScriptový kód pro A/B testování, sledování uživatelů a personalizaci.

Výzvy:

• Dynamické vkládání skriptů: Frameworky pro A/B testování často vkládají skripty dynamicky pro kontrolu variant experimentů.
• Skripty třetích stran: Sledování uživatelů a personalizace se mohou spoléhat na skripty třetích stran hostované na různých doménách.
• Logika specifická pro jazyk: Některá logika specifická pro jazyk může být implementována pomocí inline skriptů.

Řešení:

1. Implementujte CSP na bázi Nonce: Použijte CSP na bázi nonce jako primární obranu proti útokům XSS.
2. Programatické vkládání Nonce pro skripty A/B testování: Použijte výše popsanou techniku programatického vkládání nonce k vložení nonce do dynamicky vytvořených elementů skriptů pro A/B testování.
3. Whitelistování specifických domén třetích stran: Pečlivě zařaďte domény důvěryhodných skriptů třetích stran na whitelist v direktivě `script-src`. Vyhněte se používání zástupných domén, pokud to není absolutně nutné.
4. Hashování inline skriptů pro logiku specifickou pro jazyk: Pokud je to možné, přesuňte logiku specifickou pro jazyk do samostatných JavaScriptových souborů a použijte hashe skriptů k jejich whitelistování. Pokud jsou inline skripty nevyhnutelné, použijte hashe skriptů k jejich individuálnímu whitelistování.
5. Reportování CSP: Implementujte reportování CSP pro monitorování porušení a identifikaci jakéhokoli neočekávaného blokování skriptů.

Závěr

Zabezpečení dynamicky vkládaných skriptů pomocí CSP nonce vyžaduje pečlivý a dobře naplánovaný přístup. Ačkoli to může být složitější než pouhé whitelistování domén, nabízí to významné zlepšení bezpečnostní pozice vaší aplikace. Porozuměním výzvám a implementací řešení uvedených v tomto článku můžete účinně chránit svůj frontend před útoky XSS a vytvořit bezpečnější webovou aplikaci pro vaše uživatele po celém světě. Nezapomeňte vždy upřednostňovat osvědčené postupy v oblasti bezpečnosti a pravidelně kontrolovat a aktualizovat své CSP, abyste byli o krok napřed před novými hrozbami.

Dodržováním principů a technik uvedených v tomto průvodci můžete vytvořit robustní a efektivní CSP, které ochrání váš web před útoky XSS a zároveň vám umožní používat dynamicky vkládané skripty. Nezapomeňte důkladně testovat své CSP a pravidelně ho monitorovat, abyste zajistili, že funguje podle očekávání a neblokuje žádné legitimní zdroje.